<template>
	<view>
		<!-- <view class="uni-header">
			<view class="uni-group">
				<view class="uni-title"></view>
				<view class="uni-sub-title"></view>
			</view>
			<view class="uni-group">
				<input class="uni-search" type="text" v-model="query" placeholder="请输入搜索内容" />
				<button class="uni-button" type="default" size="mini" @click="search">搜索</button>
			</view>
		</view> -->

		<view style="padding-top: 30px;padding-left: 30px;">
			<!-- <download-excel :data="json_data" name="excel.xls" type="csv">
			    <button class="uni-button uni-button-full" type="primary" style="width: 100px;">导出exel</button>
			</download-excel> -->
			<button class="uni-button uni-button-full" type="primary" style="width: 120px;"
				@click="daochu">导出excel</button>
			<text
				style="font-size:30rpx;line-height:40px;color: #666666;">操作提示：同意仅代表同意提现，暂未打款；已打款表示打款完成；微信自动提现可忽略同意，直接点击已打款</text>
		</view>


		<view class="uni-container">
			<unicloud-db ref="udb" :collection="collectionList" :options="options" where=""
				field="_id,commission,createtime,count,balance,status,type,msg,uid{nickname,avatar,realname,zhifubao}"
				page-data="replace" :orderby="orderby" :getcount="true" :page-size="options.pageSize"
				:page-current="options.pageCurrent" v-slot:default="{ data, pagination, loading, error }">
				<uni-table :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe>
					<uni-tr>
						<uni-th align="center">ID</uni-th>
						<uni-th align="center">昵称</uni-th>
						<uni-th align="center">真实姓名</uni-th>
						<uni-th align="center">头像</uni-th>
						<uni-th align="center">提现金额</uni-th>
						<uni-th align="center">手续费</uni-th>
						<uni-th align="center">剩余可提现</uni-th>
						<uni-th align="center">提现方式</uni-th>
						<uni-th align="center">支付宝账号</uni-th>
						<uni-th align="center">拒绝理由</uni-th>
						<uni-th align="center">时间</uni-th>
						<uni-th align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in data" :key="index">
						<uni-td align="center">{{ item._id }}</uni-td>
						<uni-td align="center">{{ item.uid[0]['nickname'] }}</uni-td>
						<uni-td align="center">{{ item.uid[0]['realname'] }}</uni-td>
						<uni-td align="center">
							<image :src="item.uid[0]['avatar']" mode="" style="width: 80rpx;height: 80rpx;"></image>
						</uni-td>
						<uni-td align="center">{{ Math.floor(parseFloat(item.count) * 100) / 100 }}</uni-td>
						<uni-td align="center">{{ item.commission }}</uni-td>
						<uni-td align="center">{{ Math.floor(parseFloat(item.balance) * 100) / 100 }}</uni-td>
						<uni-td align="center">{{ item.type == 'zhifubao' ? '支付宝' : '微信' }}</uni-td>
						<uni-td align="center">{{ item.uid[0]['zhifubao'] }}</uni-td>
						<uni-td align="center">{{ item.msg }}</uni-td>
						<uni-td align="center">
							<uni-dateformat :date="item.createtime * 1000" :threshold="[0, 0]" />
						</uni-td>
						<uni-td align="center" v-if="item.status == 1 || item.status == 2">
							{{ item.status == 1 ? '已同意' : '已拒绝' }}
						</uni-td>
						<uni-td align="center" v-else>
							<view class="uni-group">
								<button @click="tongyi(item, 1)" class="uni-button" size="mini" type="warn"
									v-if="item.status == 0 || item.status == 3">已打款</button>
								<button @click="tongyi(item, 3)" class="uni-button" size="mini" type="warn"
									v-if="item.status == 0">同意</button>
								<button @click="jujue(item)" class="uni-button" size="mini" type="warn"
									v-if="item.status == 0 || item.status == 3">拒绝</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current"
						:total="pagination.count" @change="onPageChanged" />
				</view>
			</unicloud-db>
		</view>

		<uni-popup ref="Popup" type="center">
			<view class="modal" style="width:450px; padding: 20px;">
				<view class="uni-container">
					<uni-forms ref="form" validateTrigger="bind">
						<uni-forms-item label="拒绝理由" name="title" labelWidth="100">
							<input class="uni-input-border" type="text" placeholder="拒绝理由" v-model="item.msg" />
						</uni-forms-item>
						<view class="uni-button-group pointer">
							<button class="uni-button uni-button-full" type="primary" :disabled="isLoading"
								@click="save">确定拒绝</button>
						</view>
					</uni-forms>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const db = uniCloud.database();
	// 表查询配置
	const dbOrderBy = 'createtime desc'; // 排序字段
	const dbSearchFields = ['uid']; // 支持模糊搜索的字段列表
	// 分页配置
	const pageSize = 10;
	const pageCurrent = 1;

	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				collectionList: [
					db.collection('withdrawrecord_log').getTemp(),
					db.collection('userinfo').getTemp()
				],
				query: '',
				where: '',
				orderby: dbOrderBy,
				options: {
					pageSize,
					pageCurrent
				},
				item: {},
				isLoading: false,
				json_data: [

				]
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			formatJson(filterVal, jsonData) {
				return jsonData.map((v, index) => filterVal.map(j => {
					return v[j]
				}))
			},
			daochu() {
				var self = this
				var data = this.$refs.udb.dataList
				var arr = []
				for (var i = 0; i < data.length; i++) {
					var item = data[i]
					if (item.status == 3) {
						var json = {}
						json['index'] = arr.length + 1
						json['zhifubao'] = item['uid'][0]['zhifubao']
						json['realname'] = item['uid'][0]['realname']
						json['amount'] = Math.floor(parseFloat(item.count) * 100) / 100
						json['id'] = item['_id']
						arr.push(json)
					}
				}
				console.log(arr)
				import('./Export2Excel').then(excel => {
					const tHeader = ['序号', '收款方支付宝账号', '收款方姓名', '金额', '备注']
					const filterVal = ['index', 'zhifubao', 'realname', 'amount', 'id']
					const data = this.formatJson(filterVal, arr)
					excel.export_json_to_excel({
						header: tHeader,
						data,
						filename: "提现列表",
						autoWidth: this.autoWidth,
						bookType: 'xls'
					})
				})
			},
			getWhere() {
				const query = this.query.trim();
				if (!query) {
					return '';
				}
				const queryRe = new RegExp(query, 'i');
				return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ');
			},
			search() {
				const newWhere = this.getWhere();
				const isSameWhere = newWhere === this.where;
				this.where = newWhere;
				if (isSameWhere) {
					// 相同条件时，手动强制刷新
					this.loadData();
				}
			},
			loadData(clear = true) {
				this.$refs.udb.loadData({
					clear
				});
			},
			onPageChanged(e) {
				this.$refs.udb.loadData({
					current: e.current
				});
			},
			tongyi(item, type) {
				uni.showLoading({
					title: '处理中'
				});
				uniCloud.callFunction({
					name: 'uni-admin',
					data: {
						action: "admin/tixian",
						data: {
							id: item._id,
							type: type
						}
					}
				}).then((res) => {
					console.log(res, "get--------------")
					this.loadData();
					uni.hideLoading();
				}).catch((res) => {
					console.log(res)
				}).finally(err => {
					uni.hideLoading();
				})
			},
			jujue(item) {
				this.item = item;
				this.$refs.Popup.open();
			},
			save() {
				this.isLoading = true
				uni.showLoading({
					title: '加载中'
				});
				uniCloud.callFunction({
					name: 'uni-admin',
					data: {
						action: "admin/tixian",
						data: {
							id: this.item._id,
							type: 2,
							msg: this.item.msg
						}
					}
				}).then((res) => {
					console.log(res, "get--------------")
					uni.hideLoading();
					this.isLoading = false
					this.$refs.Popup.close();
					this.loadData();
				}).catch((res) => {
					console.log(res)
				}).finally(err => {
					this.isLoading = false
					uni.hideLoading();
				})
			}
		}
	};
</script>
<style>
	.modal {
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		background-color: #ffffff;
	}

	.modal-content {
		padding: 15px;
		height: 500px;
		box-sizing: border-box;
	}
</style>
